<template>
  <div>
    <input type="text" v-model="count" />
    <input type="text" v-model="num" />
    <h3>输入的数字相加为:{{ all }}</h3>
  </div>
</template>

<script>
import { reactive, toRefs, computed, watch } from 'vue'

// defineComponent 可以被省略，程序的健壮性考虑、兼容性考虑
export default {
  setup() {
    const state = reactive({
      count: 0,
      num: 0,
      // 依赖响应式数据对象，返回一个计算的新值，自动调用和计算
      all: computed(() => {
        return parseInt(state.count) + parseInt(state.num)
      })
    })

    // watch 可以观察所有的响应式数据对象
    watch(state, () => {
      console.log("观察整个 state 里面的数据变化", state);
    })

    // 监听单个对象
    watch(() => state.count, (newVal, oldVal) => {
      debugger;
    })

    // 监听多个对象
    watch([() => state.count, () => state.num], (newVal, oldVal) => {
      debugger;
    })


    return {
      ...toRefs(state),
    }
  }
}
</script>

<style lang="scss" scoped>

</style>